<template>
  <view class="inv-top-menu-bar">
    <view class="top-menu">
		<!-- :class="istran ? 'top-menu-list tran' : 'top-menu-list'" -->
      <view class="top-menu-list" >
		  <scroll-view scroll-x="true" :scroll-left="tran">
		  	<view
		  	  v-for="(item, index) in navList"
		  	  :key="index"
		  	  :class="item.active ? 't-btn active'  : 't-btn'"
		  	  @click="handleNavClick(index)"
		  	>
		  	  {{ item.text }}
		  	</view>
		  </scroll-view>
      </view>
    </view>
	<view v-if="activeIndex == 0 ">
		<ReceivedResume ref="ReceivedResume"></ReceivedResume>
	</view>
	<view v-if="activeIndex == 1 ">
		<ResumeDownload ref="ResumeDownload"></ResumeDownload>
	</view>
	<view v-if="activeIndex == 2 ">
		<ResumeInterviewInvitation ref="ResumeInterviewInvitation"></ResumeInterviewInvitation>
	</view>
	<view v-if="activeIndex == 3 ">
		<ResumeFavorites ref="ResumeFavorites"></ResumeFavorites>
	</view>
	<view v-if="activeIndex == 4 ">
		<BrowsingRecords ref="BrowsingRecords"></BrowsingRecords>
	</view>
  </view>
</template>

<script>
import BrowsingRecords from "./components/BrowsingRecords.vue" 
import ReceivedResume from './components/ReceivedResume.vue'
import ResumeDownload from './components/ResumeDownload.vue'
import ResumeFavorites from './components/ResumeFavorites.vue' 
import ResumeInterviewInvitation from './components/ResumeInterviewInvitation.vue' 
import { getParam } from '../utils/index.js'
// import ResumeVideoInvitation from '@/company/ResumeManagement/ResumeVideoInvitation.vue'
export default {
  components:{
	  ReceivedResume,
	  ResumeDownload,
	  ResumeInterviewInvitation,
	  // ResumeVideoInvitation,
	  ResumeFavorites,
	  BrowsingRecords
  },
  data () {
    return {
      activeIndex: 0,
	  navTitle:'',
	  tran:0,
	  navList: [{
	  		text: '收到投递',
	  		href: '/company/ResumeManagement/ReceivedResume',
	  		active: true
	  	},
	  	{
	  		text: '我的下载',
	  		href: '/company/ResumeManagement/ResumeDownload',
	  		active: false
	  	},
	  	{
	  		text: '面试邀请',
	  		href: '/company/ResumeManagement/ResumeInterviewInvitation',
	  		active: false
	  	},
	  	{
	  		text: '我的收藏',
	  		href: '/company/ResumeManagement/ResumeFavorites',
	  		active: false
	  	},
	  	{
	  		text: '浏览记录',
	  		href: '/company/ResumeManagement/BrowsingRecords',
	  		active: false
	  	}
	  ]
    }
  },
  mounted () {
	  this.handleNavClick(parseInt(getParam().navIndex))
  },
  onReachBottom(){
	this.carryOutComponentsFunction()
  },
  watch:{
	activeIndex(val){
		this.updataListFun()
	}
  },
  onShow() {
	  this.updataListFun()
  },
  methods:{
	  /**
	   * 导航切换
	   * @index 当前点击导航索引
	   * */
	  handleNavClick(index){
		  this.activeIndex = index
		  this.tran = 0
		  this.navList.forEach((item,idx)=>{
				item.active = false
		  })
		  this.navList[index].active = true
		  switch (index) {
		  	case 0: 
		  		this.navTitle = '收到投递'
		  	break
		  	case 1: 
		  		this.navTitle = '我的下载'
		  	break
		  	case 2:
		  		this.navTitle = '面试邀请'
		  	break
			case 3:
				this.navTitle = '我的收藏'
			break
			case 4:
				this.navTitle = '浏览记录'
				this.tran = 600
			break
		  	default:
		  	break
		  }
		  uni.setNavigationBarTitle({
		      title: this.navTitle
		  });
	  },
	  /**
	   * 上拉加载函数
	   * */
	  carryOutComponentsFunction(){
		  switch (this.activeIndex) {
		  	case 0:
		  		this.$refs.ReceivedResume.onload()
		  	break
		  	case 1: 
		  		this.$refs.ResumeDownload.onload()
		  	break
		  	case 3:
		  		this.$refs.ResumeFavorites.onload()
		  	break
		  	case 4:
		  		this.$refs.BrowsingRecords.onload()
		  	break
		  	default:
		  	break
		  }
	  },
	  /**
	   * 更新列表数据
	   * */
	  updataListFun(){
		  this.$nextTick(()=>{
			if(this.$refs.ReceivedResume){
				this.$refs.ReceivedResume.fetchData(true) 
			}
			if(this.$refs.ResumeDownload){
				this.$refs.ResumeDownload.fetchData(true) 
			}
		  })
	  }
  }
}
</script>

<style lang="scss" scoped>
.inv-top-menu-bar {
  background: #ffffff;
  .top-menu {
    overflow: hidden;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    &::-webkit-scrollbar {
      display: none;
    }
  }
  .top-menu-list {
    white-space: nowrap;
    .t-btn {
      position: relative;
      white-space: nowrap;
      display: inline-block;
      text-align: center;
      color: #666666;
      font-size: 30rpx;
      text-decoration: none;
      padding: 22rpx 24rpx 30rpx;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0.3);
      &::after {
        position: absolute;
        left: 50%;
        bottom: 12rpx;
        width: 32rpx;
        height: 6rpx;
        background-color: #1787fb;
        border-radius: 100%;
        transform: translate(-50%, 0);
      }
      &.active {
        color: #1787fb;
        &::after {
          content: ' ';
        }
      }
    }
	&.tran{
		transform: translateX(-170rpx);
	}
  }
}
</style>
